<!DOCTYPE HTML>
<html manifest="demo.appcache">
<head>
<script type="text/javascript" src="scripts/jquery-1.11.0.min.js"></script>
<script src="scripts/scripts.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles/styles.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script>
if (localStorage) {
    
	// DOM Ready
	$(function() {

			$("#saveForm").click(function(e) {
			document.getElementById("quiz");
			var f = localStorage.setItem('state',f.innerHTML);	
				// Don't actually submit form
				e.preventDefault();
				gradeTest();
				saveFeedback();
				
				// serializeArray is awesome and powerful
				var data = $("#quiz").serializeArray();
				
				// iterate over results
				$.each(data, function(i, obj) {
					// HTML5 magic!!
					localStorage.setItem(obj.name, obj.value);
				});				
				
			});

		if (localStorage) {

			var data = $("#quiz").serializeArray();
			$.each(data, function(i, obj) {
			$("[name='"+ obj.name +"']").val(localStorage.getItem(obj.name));

			
			});
		
		}
       
		// Provide mechanism to remove data. You'd probably actually remove it not just kill the flag
		$("#clearData")
			.click(function(e) {
				e.preventDefault();
				localStorage.clear();
				
			});
		
	});
	
function saveFeedback()
{
	var feedback = document.getElementById("feedback");
	localStorage.setItem("feedback", feedback.innerHTML);
	if (localStorage.getItem("feedback") != null) {
	feedback.innerHTML = localStorage.getItem("feedback");
}

}}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Formative Assessment</title>
</head>
<body onload="shuffle();">
<header>Learner Centred Design Formative Assessment<span class="loggedIn"></span></header>
<div id="container" class="one-edge-shadow">
  <form id="quiz" >
  <div id="mainContent">
  <div class="alert" id="feedback"></div>
    <div id="message"></div>
    <h2>Correct Answers</h2>
    <div id="correct"></div>
    <h2>Incorrect Answers</h2>
	<div id="incorrect"></div>

    <div id="resource"></div>
    <div id="quiz">
             <input name="q1" type="text" id="q1Answer">
 Name:<input name="firstName" id="firstName" type="text">
          Last name<input name="lastName" id="lastName" type="text">
           <div id="true-falseQuestion" style="display:block">
        <h2>Question 1</h2>
        <p class="itemStem">What is 1+1?</p>
          <div class="q1shufflyTF">
                   <input name="q1" id="q1inpTfRadio1" type="radio" value="True" required>
          <label id="q1lblTfRadio1" for="inpTfRadio1">True </label>
        </div>
        <div class="q1shufflyTF">
          <input name="q1" id="inpTfRadio2" type="radio" value="False">
          <label id="lblTfRadio2" for="inpTfRadio2">False </label>

        </div>
      </div>
    <div id="multiple-choiceQuestion" style="display:block">
      <h2>Question 2</h2>
      <p class="itemStem">The answers is D</p>
      <div class="shufflyMC1">
        <input name="q2" id="q2inpMcRadio1" type="radio" value="a">
        <label id="q2lblMcRadio1" for="q2inpMcRadio1">a</label>
      </div>
      <div class="q2shufflyMC">
        <input name="q2" id="q2inpMcRadio2" type="radio" value="b">
        <label id="q2lblMcRadio2" for="q2inpMcRadio2">b</label>
      </div>
      <div class="q2shufflyMC">
        <input name="q2" id="q2inpMcRadio3" type="radio" value="c">
        <label id="q2lblMcRadio3" for="q2inpMcRadio3">c</label>
      </div>
      <div class="q2shufflyMC">
        <input name="q2" id="q2inpMcRadio4" type="radio" value="d">
        <label id="q2lblMcRadio4" for="q2inpMcRadio4">d</label>
      </div>
    </div>
      <div id="checkboxQuestion" style="display:block">
         <h2>Question 3</h2>
      <p class="itemStem">What is 3+3?</p>
       <div class="q3shufflyCB">
        <input name="q3" id="q3inpCbCheckbox1" type="radio"  value="3a">
        <label id="q3lblCbCheckbox1" for="q3inpCbCheckbox1">3a
        </label>
      </div>
       <div class="q3shufflyCB">
        <input name="q3" id="q3inpCbCheckbox2" type="radio"value="4b">
        <label id="q3lblCbCheckbox2" for="q3inpCbCheckbox2">4b
        </label>
      </div>
       <div class="q3shufflyCB">
        <input name="q3" id="q3inpCbCheckbox3" type="radio"value="5c">
        <label id="q3lblCbCheckbox3" for="q3inpCbCheckbox3">5c
        </label>
      </div>
       <div class="q3shufflyCB">
        <input name="q3" id="q3inpCbCheckbox4" type="radio"value="6d">
        <label id="q3lblCbCheckbox4" for="q3inpCbCheckbox4">6d
        </label>
      </div>
    </div>
    <div id="multiple-choiceQuestion" style="display:block">
      <h2>Question 4</h2>
      <p class="itemStem">What is 4+4?</p>
      <div class="q4shufflyMC">
        <input name="q4" id="q4inpMcRadio1" type="radio" value="8">
        <label id="q4lblMcRadio1" for="q4inpMcRadio1">8</label>
      </div>
      <div class="q4shufflyMC">
        <input name="q4" id="q4inpMcRadio2" type="radio" value="9">
        <label id="q4lblMcRadio2" for="q4inpMcRadio2">9</label>
      </div>
      <div class="q4shufflyMC">
        <input name="q4" id="q4inpMcRadio3" type="radio" value="10">
        <label id="q4lblMcRadio3" for="q4inpMcRadio3">10</label>
      </div>
      <div class="q4shufflyMC">
        <input name="q4" id="q4inpMcRadio4" type="radio" value="11">
        <label id="q4lblMcRadio4" for="q4inpMcRadio4">11</label>
      </div>
    </div>
   <div id="true-falseQuestion" style="display:block">
        <h2>Question 5</h2>
        <p class="itemStem">What is 5+5?</p>
        <div class="q5shufflyTF">
          <input name="q5" id="q5inpTfRadio1" type="radio" value="5">
          <label id="q5lblTfRadio1" for="inpTfRadio1">5 </label>
        </div>
        <div class="q5shufflyTF">
          <input name="q5" id="inpTfRadio2" type="radio" value="10">
          <label id="lblTfRadio2" for="inpTfRadio2">10 </label>
        </div>
    </div>
     <div id="checkboxQuestion" style="display:block">
         <h2>Question 6</h2>
      <p class="itemStem">What is 6+6? (12,18,24)</p>
       <div class="q6shufflyCB">
        <input name="q6" id="q6inpCbCheckbox1" type="radio"value="6">
        <label id="q6lblCbCheckbox1" for="q6inpCbCheckbox1">6
        </label>
      </div>
       <div class="q6shufflyCB">
        <input name="q6" id="q6inpCbCheckbox2" type="radio"value="12">
        <label id="q6lblCbCheckbox2" for="q6inpCbCheckbox2">12
        </label>
      </div>
       <div class="q6shufflyCB">
        <input name="q6" id="q6inpCbCheckbox3" type="radio"value="18">
        <label id="q6lblCbCheckbox3" for="q6inpCbCheckbox3">18
        </label>
      </div>
       <div class="q6shufflyCB">
        <input name="q6" id="q6inpCbCheckbox4" type="radio"value="24">
        <label id="q6lblCbCheckbox4" for="q6inpCbCheckbox4">24
        </label>
      </div>
    </div>
   <div id="multiple-choiceQuestion" style="display:block">
      <h2>Question 7</h2>
      <p class="itemStem">What is 7+7?</p>
      <div class="q7shufflyMC">
        <input name="q7" id="q7inpMcRadio1" type="radio" value="7">
        <label id="q7lblMcRadio1" for="q7inpMcRadio1">7</label>
      </div>
      <div class="q7shufflyMC">
        <input name="q7" id="q7inpMcRadio2" type="radio" value="14">
        <label id="q7lblMcRadio2" for="q7inpMcRadio2">14</label>
      </div>
      <div class="q7shufflyMC">
        <input name="q7" id="q7inpMcRadio3" type="radio" value="21">
        <label id="q7lblMcRadio3" for="q7inpMcRadio3">21</label>
      </div>
      <div class="q7shufflyMC">
        <input name="q7" id="q7inpMcRadio4" type="radio" value="28">
        <label id="q7lblMcRadio4" for="q7inpMcRadio4">28</label>
      </div>
    </div>
     <div id="multiple-choiceQuestion" style="display:block">
      <h2>Question 8</h2>
      <p class="itemStem">What is 8+8?</p>
      <div class="q8shufflyMC">
        <input name="q8" id="q8inpMcRadio1" type="radio" value="8">
        <label id="q8lblMcRadio1" for="q8inpMcRadio1">8</label>
      </div>
      <div class="q8shufflyMC">
        <input name="q8" id="q8inpMcRadio2" type="radio" value="16">
        <label id="q8lblMcRadio2" for="q8inpMcRadio2">16</label>
      </div>
      <div class="q8shufflyMC">
        <input name="q8" id="q8inpMcRadio3" type="radio" value="24">
        <label id="q8lblMcRadio3" for="q8inpMcRadio3">24</label>
      </div>
      <div class="q8shufflyMC">
        <input name="q8" id="q8inpMcRadio4" type="radio" value="32">
        <label id="q8lblMcRadio4" for="q8inpMcRadio4">32</label>
      </div>
    </div>
       <div id="multiple-choiceQuestion" style="display:block">
      <h2>Question 9</h2>
      <p class="itemStem">What is 9+9?</p>
      <div class="q9shufflyMC">
        <input name="q9" id="q9inpMcRadio1" type="radio" value="9">
        <label id="q9lblMcRadio1" for="q9inpMcRadio1">9</label>
      </div>
      <div class="q9shufflyMC">
        <input name="q9" id="q9inpMcRadio2" type="radio" value="18">
        <label id="q9lblMcRadio2" for="q9inpMcRadio2">18</label>
      </div>
      <div class="q9shufflyMC">
        <input name="q9" id="q9inpMcRadio3" type="radio" value="27">
        <label id="q9lblMcRadio3" for="q9inpMcRadio3">27</label>
      </div>
      <div class="q9shufflyMC">
        <input name="q9" id="q9inpMcRadio4" type="radio" value="36">
        <label id="q9lblMcRadio4" for="q9inpMcRadio4">36</label>
      </div>
    </div>
 <div id="checkboxQuestion" style="display:block">
         <h2>Question 10</h2>
      <p class="itemStem">What is 10+10? (10,20)</p>
       <div class="q10shufflyCB">
        <input name="q10" id="q10inpCbCheckbox1" type="radio"value="10">
        <label id="q10lblCbCheckbox1" for="q10inpCbCheckbox1">10
        </label>
      </div>
       <div class="q10shufflyCB">
        <input name="q10" id="q10inpCbCheckbox2" type="radio"value="20">
        <label id="q10lblCbCheckbox2" for="q10inpCbCheckbox2">20
        </label>
      </div>
      <div class="shufflyCB">
        <input name="q10" id="q10inpCbCheckbox3" type="radio" value="30">
        <label id="q10lblCbCheckbox3" for="q10inpCbCheckbox3">30
        </label>
      </div>
      <div class="shufflyCB">
        <input name="q10" id="q10inpCbCheckbox4" type="radio" value="40">
        <label id="q10lblCbCheckbox4" for="q10inpCbCheckbox4">40
        </label>
      </div>
    </div>
<input id="saveForm" name="saveForm" class="btn" type="submit" value="Submit" />
<!--<input id="clearData" name="clearData" class="btn" type="submit" value="Clear Data" />-->
                  </form>
  </div>
</div>
<div class="alert hidden"> </div>
</body>
</html>